<template>
      <div class='commodityDetails'>
            <div class="topMod">
                  <div class="topBtn">
                        <img src="@/assets/img/commodity/fh.png" alt="" class="fh">
                        <img src="@/assets/img/commodity/fx.png" alt="" class="fx">
                        <img src="@/assets/img/commodity/sc.png" alt="" class="sc">
                  </div>
                  <div class="commodityImg"> </div>
                  <div class="pageLable">1/4</div>
            </div>
            <div class="detailsMod">
                  <div class="detailsLable">
                        <p class="price"><span>¥</span>57.9</p>
                        <p class="name">维达抽纸超韧3层130抽</p>
                  </div>
                  <div class="parameter">
                        <div class="parameterItem">
                              <p class="item1">规格</p>
                              <p class="item2">130抽（24包）</p>
                              <img src="@/assets/img/commodity/d.png" alt="" class="item3">
                        </div>
                        <div class="parameterItem">
                              <p class="item1">送至</p>
                              <p class="item2"><span>请选择</span>收货地址</p>
                              <img src="@/assets/img/commodity/d.png" alt="" class="item3">
                              <p class="bz">支付后7天内发货</p>
                        </div>
                        <div class="parameterItem">
                              <p class="item1">服务</p>
                              <p class="item2">正品保障 支持7天无理由退货</p>
                        </div>
                  </div>
                  <div class="ph">
                        <img src="@/assets/img/commodity/ph.png" alt="" class="phimg">
                        <p class="phname">
                              入选热销榜单第
                              <span>3</span>
                              名
                        </p>
                        <img src="@/assets/img/commodity/y.png" alt="" class="y">
                  </div>
                  <div class="pj">
                        <p class="spTitle">商品评价（56）</p>
                        <img src="@/assets/img/commodity/y.png" alt="" class="y">
                        <p class="hpl">
                              好评率
                              <span>98.8%</span>
                        </p>
                        <div class="lableList">
                              <span>物流很快</span>
                              <span>包装完整</span>
                              <span>非常满意</span>
                        </div>
                  </div>
                  <div class="js">
                        <p class="spTitle">商品介绍</p>
                        <img src="https://img1.baidu.com/it/u=1912436773,2119746767&fm=253&fmt=auto&app=138&f=PNG?w=500&h=520" alt="">
                  </div>
            </div>
            <div class="bottomBtn">
                  <p class="btn">立即预约</p>
            </div>
      </div>
</template>

<script>
export default {
      name: 'commodityDetails',
      components: {},
      data() {
            return {}
      },
      created() { },
      mounted() { },
      methods: {},
}
</script>
<style lang='less' scoped>
.commodityDetails {
      background: #f2f2f2;
      p {
            margin: 0;
      }
      .topMod {
            width: 100%;
            height: 8.61333rem;
            position: relative;
            overflow: hidden;
            background: #ffffff;
            .topBtn {
                  overflow: hidden;
                  padding: 0.18667rem 0.45333rem;
                  img {
                        width: 0.8rem;
                        height: 0.8rem;
                  }
                  .fh {
                        float: left;
                  }
                  .fx {
                        float: right;
                        margin-left: 0.32rem;
                  }
                  .sc {
                        float: right;
                  }
            }
            .commodityImg {
                  width: 510px;
                  height: 510px;
                  background: url("https://img2.baidu.com/it/u=4233734266,352418342&fm=26&fmt=auto")
                        no-repeat;
                  background-size: 100% 100%;
                  margin: 0 auto;
            }
            .pageLable {
                  position: absolute;
                  bottom: 0.26667rem;
                  right: 0.34667rem;
                  width: 0.72rem;
                  height: 0.45333rem;
                  background: #222222;
                  border-radius: 0.24rem;
                  opacity: 0.27;
                  font-size: 0.32rem;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 0.45333rem;
                  text-align: center;
            }
      }
      .detailsMod {
            padding: 0.26667rem 0.21333rem;
            .spTitle {
                  padding-left: 0.37333rem;
                  height: 0.4rem;
                  font-size: 0.4rem;
                  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                  font-weight: 550;
                  color: #1e2022;
                  line-height: 0.4rem;
                  position: relative;
            }
            .spTitle::after {
                  content: "";
                  width: 0.13333rem;
                  height: 0.4rem;
                  position: absolute;
                  background: url("../../assets/img/commodity/j.png") no-repeat;
                  background-size: 100% 100%;
                  top: 0;
                  left: 0;
            }
            .y {
                  float: right;
                  width: 0.16rem;
                  height: 0.26667rem;
                  margin: 0.6rem 0.24rem;
            }
            .detailsLable {
                  width: 9.57333rem;
                  height: 3.12rem;
                  background: #ffffff;
                  border-radius: 0.13333rem;
                  padding: 0.42667rem 0.56rem;
                  .price {
                        height: 0.64rem;
                        font-size: 0.64rem;
                        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                        font-weight: 500;
                        color: #ff301e;
                        line-height: 0.64rem;
                        span {
                              font-size: 0.37333rem;
                        }
                        margin-bottom: 0.48rem;
                  }
                  .name {
                        height: 0.48rem;
                        font-size: 0.48rem;
                        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                        font-weight: bold;
                        color: #1e2022;
                        line-height: 0.48rem;
                  }
            }
            .parameter {
                  width: 9.57333rem;
                  height: 4.18667rem;
                  background: #ffffff;
                  border-radius: 0.13333rem;
                  margin: 0.21333rem 0;
                  .parameterItem {
                        overflow: hidden;
                        .item1 {
                              float: left;
                              width: 1.73333rem;
                              height: 1.17333rem;
                              line-height: 1.17333rem;
                              font-size: 0.32rem;
                              font-family: SourceHanSansCN-Normal,
                                    SourceHanSansCN;
                              font-weight: 400;
                              color: #b2b2b2;
                              text-align: center;
                        }
                        .item2 {
                              float: left;
                              height: 1.17333rem;
                              line-height: 1.17333rem;
                              font-size: 0.37333rem;
                              font-family: SourceHanSansCN-Normal,
                                    SourceHanSansCN;
                              font-weight: 400;
                              color: #100f0f;
                              span {
                                    color: #d52323;
                              }
                        }
                        .item3 {
                              float: right;
                              width: 0.48rem;
                              height: 0.10667rem;
                              margin: 0.53333rem 0.4rem;
                        }
                        .bz {
                              float: left;
                              margin: 0 1.73333rem;
                              height: 28px;
                              line-height: 28px;
                              font-size: 28px;
                              font-family: SourceHanSansCN-Normal,
                                    SourceHanSansCN;
                              font-weight: 400;
                              color: #d52323;
                        }
                  }
            }
            .ph {
                  width: 9.57333rem;
                  height: 1.46667rem;
                  background: #ffffff;
                  border-radius: 0.13333rem;
                  overflow: hidden;
                  .phimg {
                        float: left;
                        width: 0.64rem;
                        height: 0.64rem;
                        margin: 0.42667rem 0.24rem 0.4rem 0.37333rem;
                  }
                  .phname {
                        float: left;
                        height: 1.46667rem;
                        line-height: 1.46667rem;
                        font-size: 0.37333rem;
                        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                        font-weight: 400;
                        color: #1e2022;
                        span {
                              font-weight: 550;
                        }
                  }
            }
            .pj {
                  height: 1.22667rem;
                  background: #ffffff;
                  border-radius: 0.13333rem;
                  padding: 0.53333rem 0.24rem;
                  margin: 0.21333rem 0 0.29333rem;
                  overflow: hidden;
                  .y {
                        margin: 0.08rem 0.24rem;
                  }
                  .spTitle {
                        float: left;
                  }
                  .hpl {
                        float: right;
                        height: 0.34667rem;
                        font-size: 0.34667rem;
                        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                        font-weight: 400;
                        color: #636363;
                        line-height: 0.34667rem;
                        span {
                              color: #d52323;
                        }
                  }
                  .lableList {
                        overflow: hidden;
                        width: 100%;
                        float: left;
                        margin-top: 0.32rem;
                        span {
                              float: left;
                              width: 1.92rem;
                              height: 0.64rem;
                              background: #f5f5f5;
                              border-radius: 0.32rem;
                              font-size: 0.32rem;
                              font-family: SourceHanSansCN-Normal,
                                    SourceHanSansCN;
                              font-weight: 400;
                              color: #636363;
                              line-height: 0.64rem;
                              text-align: center;
                        }
                  }
            }
            .js {
                  height: 18.24rem;
                  background: #ffffff;
                  border-radius: 0.13333rem;
                  padding: 0.53333rem 0;
                  .spTitle {
                        margin-left: 0.24rem;
                  }
                  img {
                        margin-top: 0.42667rem;
                  }
            }
      }
      .bottomBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2.05333rem;
            background: #ffffff;
            box-shadow: 0 0.05333rem 0.10667rem 0 rgb(0 0 0 / 50%),
                  0 0.02667rem 0.05333rem 0 rgb(255 255 255 / 34%);
            overflow: hidden;
            .btn {
                  float: right;
                  width: 2.72rem;
                  height: 0.96rem;
                  background: linear-gradient(313deg, #a1008c 0%, #ff005e 100%);
                  box-shadow: 0 0.05333rem 0.10667rem 0 rgb(0 0 0 / 50%);
                  border-radius: 0.48rem;
                  font-size: 0.37333rem;
                  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 0.96rem;
                  text-shadow: 0 0.05333rem 0.10667rem rgb(0 0 0 / 50%);
                  text-align: center;
                  margin: 0.50667rem 0.21333rem;
            }
      }
}
</style>